<template>
	<div class="bg">
		<!-- 商品轮播图区 -->
		<transition
		@before-enter="beforeEnter"
		@enter="enter"
		@after-enter="afterEnter"
		>
			<div class="ball" v-show="flag" ref="ball"></div>
		</transition>
		<div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner" v-for="item in list">
						<img :src="item.url">
					</div>
				</div>
			</div>
		<!-- 商品购买区 -->
		<div class="mui-card" v-for="item in list">
				<div class="mui-card-header">{{item.title}}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						市场价：￥<span class="old">{{item.m_price}}</span><span class="new">购买价:￥
						{{item.sell_price}}</span>
						<div class="num">购买数量:
						<numbox @getcount = "getNum"></numbox>
						</div>
						<mt-button type="primary" size="small">立即购买</mt-button>
						<mt-button type="danger" size="small" @click="addCar">加入购物车</mt-button>
						
					</div>
				</div>
			</div>
			<!-- 商品详情去 -->
			<div class="mui-card" >
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner" v-for="item in list">
						<p>库存情况：{{item.stock}}件</p>
						<p>上架时间：{{item.add_time}}</p>
					</div>
				</div>
				<div class="mui-card-footer">
					<mt-button type="danger" size="large" plain @click="getMore(id)">加载更多</mt-button>
				</div>
			</div>
	</div>
</template>

<script>
	import numbox from '../subcomponent/goodsinfonum.vue'
	export default({
		data(){
			return {
				id:this.$route.params.id,
				list:[],
				flag:false,
				count:1//用户选中商品数量
			}
		},
		created(){
			this.getLunBo()
		},
		methods:{
			getLunBo(){
				this.$http.get('http://localhost:3002/goodslist').then(result=>{
						if(result.body.status==0){
						let arr=[]
						//定义res用来接收循环message
						arr = result.body.message
						res  = this.list
						for (let index in arr) {
							if(arr[index].id == this.id){
								this.list.push(arr[index])
							}
						}
					}
				})
		},
		//拼接处一个要保存到store中的数组
		addCar(){
			this.flag=!this.flag
			var goodsinfo = {
				id:this.id,
				count:this.count,
				price:this.list[0].sell_price,
				title:this.list[0].title,
				url:this.list[0].url,
				selected:true
				}
				this.$store.commit('addToCar',goodsinfo)
		},
		getMore(id){
			this.$router.push({name:"GoodsDet",params:{id}})
		},
		beforeEnter(el){
			el.style.transform = "translate(0,0)"
		},
		// 小球动画优化思路
		/*
		* 1.小球最终位移是固定的，不同分辨率，或滚动条有一定滚动距离之后会不正确
		* 2.所以不能把位移横纵坐标写死，应该根据不同情况动态计算坐标值
		* 购物车图标左上角离顶部距离和左部距离与小球左上角位置相减
		* */
		enter(el,done){
			el.offsetWidth
			//获取小球位置
			const ballPos = this.$refs.ball.getBoundingClientRect()
			//获取图标在页面中位置
			const badgePos = document.getElementById('badge').getBoundingClientRect()
			let x = badgePos.left - ballPos.left
			let y = badgePos.top - ballPos.top
			el.style.transform=	`translate(${x}px,${y}px)`
			el.style.transition="all 1s cubic-bezier(.4,-0.3,1,.68)"
			done()
		},
		afterEnter(el){
			this.flag = !this.flag
		},
		//如何拿到数量加入购物车，按钮属于goodsinfo，数字属于numbox组件
		//涉及到父子组件嵌套，所以，无法直接在goodsinfo页面中国区
		//时间调用本质：父向子传递方法，子调用方法，同时把数据当做参数传递诶方法
		getNum(count){
			//子组件向父组件传值，保存在data上
			this.count = count
			
		}
		
		},
		components:{
			numbox
		}
})
</script>

<style>
	.new{
		color: red;
		font-size: 14px;
		margin-left: 20px;
	}
	.old{
		text-decoration: line-through;
	}
	.bg{
		background: #CCCCCC;
		overflow: hidden;
		margin-bottom: 50px;
	}
	.mui-card-content-inner{
		padding: 0;
	}
	.mui-card-content-inner img{
		width: 100%;
		height: 100%;
	}
	.ball{
		width: 18px;
		height: 18px;
		border-radius: 50%;
		background: red;
		position: absolute;
		top: 380px;
		left: 126px;
		z-index: 99;
	}
</style>
